<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/css/layui.css}" href="css/layui.css">
    <style>
        .progress-bar {
            margin-top: 20px;
            width: 80%;
            padding-left: 30px;
        }

        .log-container {
            padding: 30px;
        }

        .log-content {
            height: 300px;
            padding: 20px;
            overflow: scroll;
            white-space: pre-line;
        }
    </style>
</head>
<body>
<div class="progress-bar">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>升级进度</legend>
    </fieldset>
    <div class="layui-progress">
        <div class="layui-progress layui-progress-big" lay-filter="progress" lay-showPercent="true">
            <div class="layui-progress-bar" lay-percent="0%"></div>
        </div>
    </div>
</div>
<div class="log-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>升级日志</legend>
    </fieldset>
    <div class="log-content">
    </div>
</div>
<script th:src="@{/static/js/jquery-3.2.1.min.js}"></script>
<script th:src="${#httpServletRequest.getContextPath()}+'/static/scripts/common/xtcommon.js'"></script>
<script th:src="@{/static/js/layui.js}" src="js/layui.js"></script>
<script>
    layui.use(["element","layer"], function () {
        var element = layui.element;
        var $ = layui.jquery;
        if (!!window.EventSource) {
            var source = new EventSource(ctx + "/dep/queryProgress");
            source.addEventListener("message", function(e) {
                var data = JSON.parse(e.data);
                if(data.state){
                    $(".log-content").text(data.model.logs);
                    element.progress("progress", (data.model.speed + "%"));
                    if(data.model.speed>=100){
                        source.close();
                    }
                }else{
                    source.close();
                    layer.msg(data.message,{icon:2});
                }
            });

            source.addEventListener("open", function(e) {
                console.log("连接打开.");
            }, false);

            source.addEventListener("error", function(e) {
                if (e.readyState == EventSource.CLOSED) {
                    console.log("连接关闭");
                } else {
                    console.log(e.readyState);
                }
            }, false);
        } else {
            console.log("没有sse");
        }
    });
</script>
</body>
</html>